<template>
  <view class="input_box">
    <view class="flex">
      <text v-if="leftFlag" :class="`iconfont ${leftText}`"></text>
      <text v-else class="title_text">{{ leftText }}</text>
      <input
        type="text"
        class="ipt"
        :placeholder="placeholder"
        :value="value"
        @input="changeInput"
        :disabled="lockIpt"
      />
    </view>
    <button v-if="rightFlag" @click="endTimeStart" class="btn" :disabled="flag">
      {{ endTimes == startTime ? rightText : endTimes }}
    </button>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

//接收父组件传来的值
/*
leftText：左侧内容  默认值为文本内容，类型为字符串，非必填，可传入图标名称，如：icon-shouji
leftFlag：左侧是否显示  默认值为true，类型为布尔值，非必填，如：true/false
placeholder：输入框提示 默认值为提示内容，类型为字符串，非必填，如：请输入内容
rightText：右侧内容  默认值为发送验证码，类型为字符串，非必填，如：发送验证码
rightFlag：右侧是否显示   默认值为false，类型为布尔值，非必填，如：true/false
value：输入框的值 类型为字符串，必填，如：123456
changeInput：输入框的值改变事件  类型为函数，必填，如：function(){}
endTime：倒计时时间  默认值为60，类型为数字，非必填，如：60
sendCode：发送验证码事件  类型为函数，非必填，如：function(){}
  */
//初始话倒计时

const props = defineProps({
  leftText: {
    type: String,
    default: '文本内容',
  },
  leftFlag: {
    type: Boolean,
    default: true,
  },

  placeholder: {
    type: String,
    default: '请输入内容',
  },
  rightText: {
    type: String,
    default: '发送验证码',
  },
  rightFlag: {
    type: Boolean,
    default: false,
  },
  value: {
    default: '',
    required: true,
  },
  changeInput: {
    type: Function,
    required: true,
  },
  endTime: {
    type: Number,
    default: 60,
  },
  sendCode: {
    type: Function,
  },
  flag: {
    type: Boolean,
    default: false,
  },
  changeState: {
    type: Function,
  },
  lockIpt: {
    type: Boolean,
    default: false,
  },
})

//倒计时函数开始
const endTimeStart = async () => {
  props.changeState && props.changeState()
  //利用防抖，防止按钮多次点击
  clearInterval(timer.value)
  //调用发送验证码事件
  let res = timer.value == null && props.sendCode && (await props.sendCode())

  if (!res || res.code != '200') {
    return
  }
  timer.value = setInterval(() => {
    //进行倒计时，倒计时间减少 ，当倒计时结束，清除定时器
    endTimes.value--
    if (endTimes.value <= 0) {
      clearInterval(timer.value)
      timer.value = null
      endTimes.value = startTime.value
      props.changeState && props.changeState()
    }
  }, 1000)
}

const time = Number(props.endTime)
const timer: any = ref(null)
//倒计时时间
const endTimes = ref<number>(time)
//初始时间
const startTime = ref<number>(time)
</script>

<style scoped lang="scss">
.title_text {
  font-size: 28rpx;
}
.btn {
  background: #fff !important;
  border: none;
  font-size: 25rpx;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.input_box {
  width: 80%;
  margin: 1.8rem auto;
  border-bottom: 2rpx solid rgb(224, 223, 223);
  display: flex;
  justify-content: space-between;
  align-items: center;

  .ipt {
    height: 4rem;
    line-height: 4.5rem;
    margin-left: 1rem;
    font-size: 28rpx;
  }

  .iconfont {
    font-size: 56rpx;
    color: rgb(170, 170, 170);
  }
}
</style>
